﻿@model Document
@using EasyMvc.Models
@using EasyMvc.Controls
@{
    Layout = "~/Areas/MWeb/Views/Shared/_Layout.Edit.cshtml";
}
@section PageSpecificStyleSheetIncludes{
    <link href="@Url.Content("~/Static/uploadify/uploadify.css")" rel="stylesheet" type="text/css" />
    <link href="@Url.Content("~/Static/Styles/jquery.tagit.css")" rel="stylesheet" type="text/css" />
}
@section PageSpecificJavascriptIncludes{
    <script type="text/javascript" src="@Url.Content("~/Static/uploadify/swfobject.js")"></script>
    <script type="text/javascript" src="@Url.Content("~/Static/uploadify/jquery.uploadify.v2.1.4.js")"></script>
    <script type="text/javascript" src="@Url.Content("~/Static/Scripts/flashupload.js")"></script>
    <script type="text/javascript" src="@Url.Content("~/Static/Scripts/picturehelper.js")"></script>
    <script type="text/javascript" src="@Url.Content("~/Static/Scripts/Libs/jquery.tagit.js")"></script>
    <script type="text/javascript" src="@Url.Content("~/Static/xheditor/xheditor-1.1.6-zh-cn.min.js")"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $("#Tags").tagit();

            //editor
            $('#Content').xheditor();

            //Init Map
            $("#tabs").tabs();
            var uploadPath = "/FileUpload.ashx?folder=documentpictures";

            //Uploader
            $('#fileUploadPanel').FileUpload(uploadPath,
                function (msg) {
                    MakePictureItem(msg.url, msg.localname, false);
                });

            picturehelper(jQuery.parseJSON('@Html.Raw(ViewData["Pictures"].ToString())'), $("form").first(), $("#pictures"));

            $("#posts .mydate").datepicker();

            $("#posts .delete").live("click", function () {
                $(this).parents("tr:first").remove();
                return false;
            });
        });

        function AddPostSuccess(result) {
            var post = $(result);
            $("#posts").append(post);
            $(".mydate", post).datepicker();

            resetValidation();
        }

        function resetValidation() {
            $("#mainForm").removeData("validator");
            $("#mainForm").removeData("unobtrusiveValidation");
            $.validator.unobtrusive.parse("#mainForm");
        }
   </script>
}
@section MainContent{
    <div id="tabs">
        <ul>
            <li><a href="#tabs-1">基本信息</a></li>
            <li><a href="#tabs-2">点评信息</a></li>
            <li><a href="#tabs-3">图片信息</a></li>
        </ul>
        <div id="tabs-1">
            <fieldset>
                <legend>文档信息</legend>
                <div class="editItem">
                     <span class="label"><span class="rq">*</span>名称：</span>
                    @Html.TextBox("Name", null, new { style="width:300px"})
                    @Html.ValidationMessage("Name")
                </div>

                <div class="editItem">
                    <span class="label">标签：</span>（请用空格隔开如"tag1 tag2 tag3"）
                    <br />
                    @Html.TextBox("Tags")
                </div>
            </fieldset>

            <fieldset>
                <legend>所属分类(请选择分类)：</legend>  
                @Html.DropDownList("categoryId")
            </fieldset>

            <fieldset>
                <legend>详细内容：</legend>  
                @Html.TextAreaFor(m => m.Content, new { style = "width: 100%; height:200px" })
            </fieldset>
        </div>
        <div id="tabs-2">
            <div class="toolbar">
                @Ajax.ActionLink("添加点评", "AddPost", null, new AjaxOptions() { OnSuccess = "AddPostSuccess" }, null)
            </div>
            <table cellspacing="0" width="80%" id="posts">
                <tr class="forumno" style="background:#ddd">
                    <td>
                        日期
                    </td>
                    <td>
                        性别
                    </td>
                    <td>
                        内容
                    </td>
                    <td>
                        删除
                    </td>
                 </tr>
                 @if (Model.DocumentPosts != null)
                 {
                     foreach (var post in Model.DocumentPosts)
                    {
                        Html.RenderPartial("PostRow", post);
                    }
                 }
            </table>
            <div class="clear"></div>
        </div>
        <div id="tabs-3">
            <fieldset>
                <legend>文档图片</legend>

                <div class="ui-state-highlight ui-corner-all">
                        支持多文件上传（按ctrl键选取），如无法显示请安装Flash插件
                    </div>
                <input type="file" name="fileUploadPanel" id="fileUploadPanel" />
                <div id="fileQueue"></div>

                <div class="editor-label">请拖拽图片进行排序，或者拖拽图片到左边分类进行归类</div>
                <input id="pictures" name="pictures" type="hidden" value="" />
                <div style="width: 100%;">
                    <div id="ptabs">
                        <ul>
                            @foreach (var t in (Dictionary<int, string>)ViewData["PictureCategory"])
                                {        
                            <li><a href="#ptabs-@t.Key">
                            <p><img src="@Url.Content("~/Static/images/picture_folder.png")" /></p>
                                    <p>@t.Value</p></a></li>
                            }
                        </ul>
                        @foreach (var t in (Dictionary<int, string>)ViewData["PictureCategory"])
                            { 
                        <div id="ptabs-@t.Key">
                            <ul id="sortable-@t.Key" pictureType="@t.Key" class="connectedSortable ui-helper-reset">
                            </ul>
                        </div>
                        }
                    </div>
                    <ul id="sortable" />
                </div>
            </fieldset>
        </div>
    </div>
}


